//水平垂直居中
.algin_justity_center {
  @extend .flex;
  @extend .flex-align-items-center;
  @extend .flex-justify-content-center;
}

//垂直居中 水平两端对齐
.space_between {
  @extend .flex;
  @extend .flex-justify-content-between;
}

// 垂直两端对齐， 水平居中
.algin_around_justify_center {
  @extend .flex;
  @extend .flex-col;
  @extend .flex-justify-content-between;
}

//垂直居中 水平每个项目两侧的间隔相等
.space_around {
  @extend .flex;
  @extend .flex-justify-content-around;
}

// 垂直居中 水平左对齐
.algin_center_justify_left {
  @extend .flex;
  @extend .flex-align-items-center;
  @extend .flex-justify-content-left;
}

// 垂直居中 水平右对齐
.algin_center_justify_right {
  @extend .flex;
  @extend .flex-align-items-center;
  @extend .flex-justify-content-right;
}

// 垂直顶部对齐， 水平两端对齐
.algin_top_justify_between {
  @extend .flex;
  @extend .flex-align-items-top;
  @extend .flex-justify-content-between;
}

// 垂直顶部对齐， 水平两端对齐
.algin_top_justify_left {
  @extend .flex;
  @extend .flex-align-items-top;
  @extend .flex-justify-content-left;
}

// 垂直顶部对齐， 水平居中
.algin_top_justify_center {
  @extend .flex;
  @extend .flex-align-items-top;
  @extend .flex-justify-content-center;
}

// 垂直顶部对齐， 水平右对齐
.algin_top_justify_right {
  @extend .flex;
  @extend .flex-align-items-top;
  @extend .flex-justify-content-right;
}

// 设置为flex
.flex {
  display: flex;
}

// 列式弹性盒子
.flex-col {
  flex-direction: column;
}

// 换行
.flex-wrap {
  flex-wrap: wrap;
}

// 不换行
.flex-nowrap {
  flex-wrap: nowrap;
}

// 列式布局垂直居中
.flex-align-items-center {
  align-items: center;
}

// 列式布局顶部对齐
.flex-align-items-top {
  align-items: flex-start;
}

// 列式布局底部对齐
.flex-align-items-bottom {
  align-items: flex-end;
}

// 行式布局左边对齐
.flex-justify-content-left {
  justify-content: flex-start;
}

// 行式布局水平居中
.flex-justify-content-center {
  justify-content: center;
}

// 行式布局右边对齐
.flex-justify-content-right {
  justify-content: flex-end;
}

// 行式布局水平两端对齐，项目之间的间隔都相等
.flex-justify-content-between {
  justify-content: space-between;
}

// 行式布局，水平每个项目两侧的间隔相等，所以项目之间的间隔比项目与父元素两边的间隔大一倍
.flex-justify-content-around {
  justify-content: space-around;
}

// ↓ 以下写在子元素class中，表示子元素占据空间大小
.flex-item-1 {
  flex: 1;
}

.flex-item-2 {
  flex: 2;
}

.flex-item-3 {
  flex: 3;
}

.flex-item-4 {
  flex: 4;
}

.flex-item-5 {
  flex: 5;
}

.flex-item-6 {
  flex: 6;
}

.flex-item-7 {
  flex: 7;
}

.flex-item-8 {
  flex: 8;
}

.flex-item-9 {
  flex: 9;
}
